import React, {useState} from 'react';
import {View, Text, Button} from 'react-native';

// 定义子组件接收的props类型
interface CounterProps {
  value: number;
  onIncrement: () => void;
}

// 父组件
export default function App() {
  // 在父组件中维护状态
  const [count, setCount] = useState(0);

  // 定义一个传递给子组件的函数
  const handleIncrement = () => {
    setCount(count + 1);
  };

  return (
    <View>
      <Text>父组件</Text>
      <Text>父组件中的计数: {count}</Text>

      {/* 向子组件传递属性和方法 */}
      <Counter value={count} onIncrement={handleIncrement} />
    </View>
  );
}
// 子组件
const Counter: React.FC<CounterProps> = ({value, onIncrement}) => {
  return (
    <View>
      <Text>子组件计数器: {value}</Text>
      <Button
        title="增加计数"
        onPress={() => {
          // 调用父组件传递的函数
          onIncrement();
        }}
      />
    </View>
  );
};
